CalendarRow.render - Code Metrics - Inspection of "Merge pull request #225 from soniCaH/feature/prese..." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — release/1.7.0 ( 762138 )

by Kevin Van

created 2020-07-06 07:39 UTC

CalendarRow.render B

↳ Parent: Project

Complexity

Conditions

Size

Total Lines	77
Code Lines	59

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	59
dl	0
loc	77
c	0
b	0
f	0
rs	8.3417
cc	3

How to fix Long Method

import React, { Component } from "react"
import { graphql, StaticQuery } from "gatsby"
import { mapMatchStatus } from "../scripts/helper"

import moment from "moment-timezone"
import "moment/locale/nl-be"

import ClubLogo from "./clublogo"

import "./team-calendar-matches.scss"

class CalendarRow extends Component {
  render() {
    moment.locale("nl-BE")

    const { result } = this.props
    const {
      matchDay,
      dateTime,
      resultHome,
      resultAway,
      regNumberHome,
      regNumberAway,
      home,
      away,
      status,
    } = result

    const d = new moment(dateTime)
    const date = d.format("dddd D MMMM YYYY")
    const time = d.format("HH:mm")
    const matchPlayed =
      typeof resultHome !== "undefined" && typeof resultAway !== "undefined"

    return (
      <article className={"team-calendar-match"}>
        <header className={"team-calendar-match__title"}>
          <h2>
            {date}{" "}
            <span className={"team-calendar-match__title__separator"}>|</span>
            <span className={"team-calendar-match__title__tagline"}>
              speeldag {matchDay}
            </span>
          </h2>
        </header>
        <div className={"team-calendar-match__main"}>
          <div
            className={`team-calendar-match__team team-calendar-match__team--home ${
              matchPlayed && resultHome > resultAway && "match-winner"
            }`}
          >
            {home}

            <ClubLogo
              regNumber={regNumberHome}
              title={home}
              className={
                "team-calendar-match__logo team-calendar-match__logo--home"
              }
              lazyload={true}
            />
          </div>
          <div className={"team-calendar-match__score"}>
            {typeof status !== "undefined" && status !== "" ? (
              <span title={mapMatchStatus(status)}>{status}</span>
            ) : typeof resultHome !== "undefined" &&
              typeof resultAway !== "undefined" ? (
              `${resultHome} - ${resultAway}`
            ) : (
              time
            )}
          </div>
          <div
            className={`team-calendar-match__team team-calendar-match__team--away ${
              matchPlayed && resultAway > resultHome && "match-winner"
            }`}
          >
            <ClubLogo
              regNumber={regNumberAway}
              title={away}
              className={
                "team-calendar-match__logo team-calendar-match__logo--away"
              }
              lazyload={true}
            />
            {away}
          </div>
        </div>
      </article>
    )
  }
}

class TeamCalendarMatches extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      loading: true,
    }

    this.apiServerUrl = props.config.site.siteMetadata.serverUrl
    this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
    this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
    this.timeout = {}
  }

  updateData() {
    let { season, region, division } = this.props

    fetch(
      `${this.apiServerUrl}/seasons/${season}/regions/${region}/matches/${division}`
    )
      .then((response) => response.json())
      .then((json) => this.setState({ data: json, loading: false }))

    this.timeout = setTimeout(() => {
      this.updateData(() => {})
    }, this.apiRefreshRate)
  }

  componentDidMount() {
    this.updateData()
  }

  componentWillUnmount() {
    clearInterval(this.timeout)
  }

  render() {
    if (this.state.loading === false && this.state.data) {
      const elewijtMatches = this.state.data
        .filter(
          ({ regNumberHome, regNumberAway }) =>
            regNumberHome === "00055" || regNumberAway === "00055"
        )
        .sort((a, b) =>
          a.dateTime > b.dateTime ? 1 : b.dateTime > a.dateTime ? -1 : 0
        )

      return (
        <section className={"team-calendar-matches"}>
          {elewijtMatches.map((result, i) => (
            <CalendarRow result={result} key={i} />
          ))}
        </section>
      )
    } else {
      return <div>Loading...</div>
    }
  }
}

const query = graphql`
  query {
    site {
      siteMetadata {
        serverUrl
        refreshRate
      }
    }
  }
`

export default ({ season, region, division }) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <TeamCalendarMatches
        config={data}
        season={season}
        region={region}
        division={division}
      />
    )}
  />
)


1			import React, { Component } from "react"
2			import { graphql, StaticQuery } from "gatsby"
3			import { mapMatchStatus } from "../scripts/helper"
4
5			import moment from "moment-timezone"
6			import "moment/locale/nl-be"
7
8			import ClubLogo from "./clublogo"
9
10			import "./team-calendar-matches.scss"
11
12			class CalendarRow extends Component {
13			render() {
14			moment.locale("nl-BE")
15
16			const { result } = this.props
17			const {
18			matchDay,
19			dateTime,
20			resultHome,
21			resultAway,
22			regNumberHome,
23			regNumberAway,
24			home,
25			away,
26			status,
27			} = result
28
29			const d = new moment(dateTime)
30			const date = d.format("dddd D MMMM YYYY")
31			const time = d.format("HH:mm")
32			const matchPlayed =
33			typeof resultHome !== "undefined" && typeof resultAway !== "undefined"
34
35			return (
36			<article className={"team-calendar-match"}>
37			<header className={"team-calendar-match__title"}>
38			<h2>
39			{date}{" "}
40			<span className={"team-calendar-match__title__separator"}>\|</span>
41			<span className={"team-calendar-match__title__tagline"}>
42			speeldag {matchDay}
43			</span>
44			</h2>
45			</header>
46			<div className={"team-calendar-match__main"}>
47			<div
48			className={`team-calendar-match__team team-calendar-match__team--home ${
49			matchPlayed && resultHome > resultAway && "match-winner"
50			}`}
51			>
52			{home}
53
54			<ClubLogo
55			regNumber={regNumberHome}
56			title={home}
57			className={
58			"team-calendar-match__logo team-calendar-match__logo--home"
59			}
60			lazyload={true}
61			/>
62			</div>
63			<div className={"team-calendar-match__score"}>
64			{typeof status !== "undefined" && status !== "" ? (
65			<span title={mapMatchStatus(status)}>{status}</span>
66			) : typeof resultHome !== "undefined" &&
67			typeof resultAway !== "undefined" ? (
68			`${resultHome} - ${resultAway}`
69			) : (
70			time
71			)}
72			</div>
73			<div
74			className={`team-calendar-match__team team-calendar-match__team--away ${
75			matchPlayed && resultAway > resultHome && "match-winner"
76			}`}
77			>
78			<ClubLogo
79			regNumber={regNumberAway}
80			title={away}
81			className={
82			"team-calendar-match__logo team-calendar-match__logo--away"
83			}
84			lazyload={true}
85			/>
86			{away}
87			</div>
88			</div>
89			</article>
90			)
91			}
92			}
93
94			class TeamCalendarMatches extends React.Component {
95			constructor(props) {
96			super(props)
97			this.state = {
98			data: [],
99			loading: true,
100			}
101
102			this.apiServerUrl = props.config.site.siteMetadata.serverUrl
103			this.apiLogoUrl = props.config.site.siteMetadata.logoUrl
104			this.apiRefreshRate = props.config.site.siteMetadata.refreshRate
105			this.timeout = {}
106			}
107
108			updateData() {
109			let { season, region, division } = this.props
110
111			fetch(
112			`${this.apiServerUrl}/seasons/${season}/regions/${region}/matches/${division}`
113			)
114			.then((response) => response.json())
115			.then((json) => this.setState({ data: json, loading: false }))
116
117			this.timeout = setTimeout(() => {
118			this.updateData(() => {})
119			}, this.apiRefreshRate)
120			}
121
122			componentDidMount() {
123			this.updateData()
124			}
125
126			componentWillUnmount() {
127			clearInterval(this.timeout)
128			}
129
130			render() {
131			if (this.state.loading === false && this.state.data) {
132			const elewijtMatches = this.state.data
133			.filter(
134			({ regNumberHome, regNumberAway }) =>
135			regNumberHome === "00055" \|\| regNumberAway === "00055"
136			)
137			.sort((a, b) =>
138			a.dateTime > b.dateTime ? 1 : b.dateTime > a.dateTime ? -1 : 0
139			)
140
141			return (
142			<section className={"team-calendar-matches"}>
143			{elewijtMatches.map((result, i) => (
144			<CalendarRow result={result} key={i} />
145			))}
146			</section>
147			)
148			} else {
149			return <div>Loading...</div>
150			}
151			}
152			}
153
154			const query = graphql`
155			query {
156			site {
157			siteMetadata {
158			serverUrl
159			refreshRate
160			}
161			}
162			}
163			`
164
165			export default ({ season, region, division }) => (
166			<StaticQuery
167			query={query}
168			render={(data) => (
169			<TeamCalendarMatches
170			config={data}
171			season={season}
172			region={region}
173			division={division}
174			/>
175			)}
176			/>
177			)
178

soniCaH / KCVV-Elewijt-Gatsby

Push — release/1.7.0 ( 762138 )

CalendarRow.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like